{% extends 'accounts/base.html' %}

{% block title %}菜单管理{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">菜单管理</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group me-2">
            {% if 'accounts:menu_create' in user_permissions %}
            <a href="{% url 'accounts:menu_create' %}" class="btn btn-sm btn-outline-primary">
                <i class="fas fa-plus"></i> 新建菜单
            </a>
            {% endif %}
        </div>
    </div>
</div>

<div class="card">
    <div class="card-body">
        {% if page_obj %}
        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>菜单名称</th>
                        <th>URL</th>
                        <th>图标</th>
                        <th>父菜单</th>
                        <th>排序</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for menu in page_obj %}
                    <tr>
                        <td>{{ menu.name }}</td>
                        <td>{{ menu.url|default:"-" }}</td>
                        <td>
                            {% if menu.icon %}
                                <i class="{{ menu.icon }}"></i> {{ menu.icon }}
                            {% else %}
                                -
                            {% endif %}
                        </td>
                        <td>{{ menu.parent|default:"-" }}</td>
                        <td>{{ menu.order }}</td>
                        <td>
                            {% if menu.is_active %}
                                <span class="badge bg-success">启用</span>
                            {% else %}
                                <span class="badge bg-secondary">禁用</span>
                            {% endif %}
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm" role="group">
                                {% if 'accounts:menu_update' in user_permissions %}
                                <a href="{% url 'accounts:menu_update' menu.pk %}" class="btn btn-warning" title="编辑">
                                    <i class="fas fa-edit"></i>
                                </a>
                                {% endif %}
                                {% if 'accounts:menu_delete' in user_permissions %}
                                <a href="{% url 'accounts:menu_delete' menu.pk %}" class="btn btn-danger" title="删除">
                                    <i class="fas fa-trash"></i>
                                </a>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                    
                    <!-- 子菜单 -->
                    {% for sub_menu in menu.menu_set.all %}
                    <tr>
                        <td>&nbsp;&nbsp;|-- {{ sub_menu.name }}</td>
                        <td>{{ sub_menu.url|default:"-" }}</td>
                        <td>
                            {% if sub_menu.icon %}
                                <i class="{{ sub_menu.icon }}"></i> {{ sub_menu.icon }}
                            {% else %}
                                -
                            {% endif %}
                        </td>
                        <td>{{ sub_menu.parent.name }}</td>
                        <td>{{ sub_menu.order }}</td>
                        <td>
                            {% if sub_menu.is_active %}
                                <span class="badge bg-success">启用</span>
                            {% else %}
                                <span class="badge bg-secondary">禁用</span>
                            {% endif %}
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm" role="group">
                                {% if 'accounts:menu_update' in user_permissions %}
                                <a href="{% url 'accounts:menu_update' sub_menu.pk %}" class="btn btn-warning" title="编辑">
                                    <i class="fas fa-edit"></i>
                                </a>
                                {% endif %}
                                {% if 'accounts:menu_delete' in user_permissions %}
                                <a href="{% url 'accounts:menu_delete' sub_menu.pk %}" class="btn btn-danger" title="删除">
                                    <i class="fas fa-trash"></i>
                                </a>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        <!-- 分页 -->
        {% if page_obj.has_other_pages %}
        <nav aria-label="菜单分页">
            <ul class="pagination justify-content-center">
                {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}">上一页</a>
                </li>
                {% endif %}
                
                {% for num in page_obj.paginator.page_range %}
                {% if page_obj.number == num %}
                <li class="page-item active">
                    <span class="page-link">{{ num }}</span>
                </li>
                {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                </li>
                {% endif %}
                {% endfor %}
                
                {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.next_page_number }}">下一页</a>
                </li>
                {% endif %}
            </ul>
        </nav>
        {% endif %}
        {% else %}
        <div class="text-center py-5">
            <p class="text-muted">暂无菜单数据</p>
            {% if 'accounts:menu_create' in user_permissions %}
            <a href="{% url 'accounts:menu_create' %}" class="btn btn-primary">
                <i class="fas fa-plus"></i> 创建第一个菜单
            </a>
            {% endif %}
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}